import React, {Component} from 'react';
import './NameCard.css';

// const NameCard = (props) => {
//     return (
//         <div className='bg-color'>
//
//         </div>
//     )
// }

class NameCard extends Component{
    constructor (props) {
        super(props);
        this.state = {
            name: '迪路兽',
            number: '12345678901',
            isHuman: true,
            tags: ['node', 'vue', 'react', 'H5 + css + js','elementUI','vantUI','小程序']
        }
    }
    changeSel () {
        this.setState({
            isHuman: !this.state.isHuman
        })
    }
    render() {
        const { name, number, isHuman, tags } = this.state;
        return (
            <div className='bg-color'>

                <ul>
                    <li><h4 className='name'>{name}</h4></li>
                    <li>电话：{number}</li>
                    <li>物种：<span className='sel' onClick={() => {this.changeSel() }}>{isHuman ? '人类': '外星生物'}</span></li>
                    <hr/>
                    <p>
                        {
                            tags.map((tag, index) => (
                                <span className='tag' key={index}>{tag}</span>
                            ))
                        }
                    </p>
                </ul>
            </div>
        )
    }
}

export default NameCard
